<template>
  <div class="page">
    <div class="line"></div>
    <div class="weui-cells">
      <div class="weui-cell weui-cell_access bg-white" hover-class="weui-cell_active">
        <div class="weui-cell__hd">布置时间</div>
        <div class="weui-cell__bd c-gray">
          <date-time v-model="prePublishTime" label="请选择"></date-time>
        </div>
        <div class="weui-cell__ft weui-cell__ft_in-access">
        </div>
      </div>
      <div class="weui-cell weui-cell_access bg-white" hover-class="weui-cell_active" style="padding-bottom: 8px;">
        <div class="weui-cell__hd">
          截止时间
        </div>
        <div class="weui-cell__bd c-gray">
          <date-time v-model="endTime" label="选填"></date-time>
        </div>
        <div class="weui-cell__ft weui-cell__ft_in-access">
        </div>
      </div>
      <div class="weui-flex pd" v-if="endTime" style="padding-top: 0;">
        <div class="pdr-s"><i class="if icon-jingtanhao c-red"></i></div>
        <div class="weui-flex__item">
          <div  class="fs-4 c-gray">如果学生未能及时完成作业，在截止日期之后，该作业的回复功能将对学生关闭。</div>
        </div>
      </div>
      <div class="weui-cell weui-cell_access bg-white" hover-class="weui-cell_active" @tap="isShowSelectGroupPanel = true">
        <div class="weui-cell__hd">
          选择班级
        </div>
        <div class="weui-cell__bd">
        </div>
        <div class="weui-cell__ft c-blue weui-cell__ft_in-access">
        </div>
      </div>
      <div v-if="selectedGroupNames" class="pdh pdb" style="position: relative; top: -4px;" @tap="isShowSelectGroupPanel = true">
        <div class="c-gray fs-5 pdb-s">已选择</div>
        <div>{{selectedGroupNames}}</div>
      </div>
    </div>
    <div class="bg-white pdh-l mgt-xl">
      <notify-btn cls="ui btn primary" :disabled="!isPublishAble" @hit="onPublish">完成</notify-btn>
    </div>
    <pop v-model="isShowSelectGroupPanel" :slotData="slotData">
      <div slot="header">
        <div class="weui-flex pd v-mdl pd" >
          <div class="weui-flex__item" >
            <notify-btn cls="ui btn link fl" @hit="onCreateGroup">＋ 新建班级</notify-btn>
          </div>
          <div class="weui-flex__item ">
            <notify-btn cls="ui btn link fr" @hit="onOk" :slotData="slotData">完成<span v-if="slotData.selectedCount">({{slotData.selectedCount}})</span></notify-btn>
          </div>
        </div>
      </div>
      <div v-for="(n, i) in slotData.groups" :key="i" class="weui-flex pdv-l" :class="{'bd-b': slotData.groups.length - 1 != i}" @tap="onCheck(n.id)">
        <div class="weui-flex__item" :class="{'c-primary': n.checked}">
          <span v-if="n.name">{{n.name}}</span>
          <open-data v-else class="fs-l" type="groupName" :open-gid="n.openGroupId"></open-data>
        </div>
        <div class="ta-r">
          <i v-if="n.checked" class="if icon-toast-correct c-primary"></i>
        </div>
      </div>
      <div v-if="slotData.groups.length == 0" class="c-gray ta-c pd-xxl">暂时还没有班级哦！</div>
    </pop>
    <page-common></page-common>
  </div>
</template>

<script>
import PageCommon from '@/components/page-common'
import {mapGetters, mapActions} from 'vuex'
import Blocks from '@/components/blocks'
import base from '@/mixins/base'
import Pop from '@/components/pop'
import TimePicker from '@/components/time-picker'
import DateTime from '@/components/datetime'
import NotifyBtn from '@/components/notify-btn'
import Cbx from '@/components/cbx'
import dayjs from 'dayjs'

export default {
  mixins: [base],
  components: {
    PageCommon,
    Pop,
    TimePicker,
    DateTime,
    NotifyBtn,
    Cbx
  },
  data () {
    return {
      isShowSelectGroupPanel: false,
      selectedIds: [],
      endTime: '',
      prePublishTime: '',
    }
  },
  computed: {
    ...mapGetters('group', [
      'groups'
    ]),
    slotData () {
      let groups = this.groups
      if (!groups) {
        return {
          groups: []
        }
      }
      let selectedCount = 0
      for (var i = 0; i < groups.length; i++) {
        let g = groups[i]
        let checked = this.selectedIds.indexOf(g.id) >= 0
        if (checked) selectedCount++
        g.checked = checked
        groups[i] = g
      }
      return {
        groups,
        selectedCount
      }
    },
    selectedGroupNames () {
      let names = []
      if (!this.groups) return names
      this.groups.forEach(n => {
        if (this.selectedIds.indexOf(n.id) < 0) return
        names.push(n.name || n.openGroupId)
      })
      let t = names.join('、')
      return t
    },
    isPublishAble () {
      if (this.selectedIds.length === 0) return false
      return true
    }
  },
  methods: {
    loginBack () {
      this.$store.dispatch('group/getMyGroups')
    },
    onCheck (id) {
      if (this.selectedIds.indexOf(id) < 0) {
        this.selectedIds.push(id)
        return
      }
      let t = []
      if (!this.selectedIds) return t
      this.selectedIds.forEach(n => {
        if (n === id) return
        t.push(n)
      })
      this.selectedIds = t
    },
    onCreateGroup () {
      wx.navigateTo({
        url: '/pages/user-group-create/main?from=document-publish'
      })
    },
    onOk () {
      this.isShowSelectGroupPanel = false
    },
    onEndTimeChange (time) {
      this.endTime = time
    },
    onPrePublishTimeChange (time) {
      this.prePublishTime = time
    },
    onPageShow () {
      this.selectedIds = []
      this.endTime = ''
      this.prePublishTime = ''
    },
    async onPublish () {
      try {
        if (!this.isPublishAble) return
        let tasks = await this.$store.dispatch('document/publish', {
          groupIds: this.selectedIds,
          endAt: this.endTime,
          prePublishAt: this.prePublishTime
        })
        if (!tasks) return
        let tids = tasks.map(n => n.id)
        this.endTime = ''
        this.prePublishTime = ''
        this.$store.commit('task/TASK_UNSHIFT_TASKS', tasks)
        wx.reLaunch({
          url: '/pages/document-forward/main?taskIds=' + tids.join('_')
        })
      } catch (e) {
        this.$debug({err: e})
      }
    },
  },
  watch: {
    selectedGroupNames (nv) {
      this.$store.commit('group/GROUP_SET_SELECTED_GROUP_NAMES', nv)
    }
  }
}
</script>

<style scoped lang="less">

</style>
